<script setup lang="ts">
import elementResizeDetectorMaker from 'element-resize-detector'
import { debounce } from 'lodash-es'
import ElectricQualityAnalysisCard from './components/Card/index.vue'
import ElectricQualityAnalysisPie from './components/Pie/index.vue'
import ElectricQualityAnalysisLineCharts from './components/Lines/index.vue'
import ElectricQualityAnalysisTable from './components/Table/index.vue'

import { useElectricQualityAnalysis } from './composable'

defineOptions({ name: 'ElectricQualityAnalysis' })

const erd = elementResizeDetectorMaker()
const wrapper = ref<HTMLElement>()
// 容器从宽到窄时趋势图表不能自由适应，使用一个开关控制组件重新挂载
const showLineCharts = ref(true)

const {
  cardData,
  pieOriginData,
  equipmentData,
  linesOriginData,
  linesLoading,
  selectMeasuringToolsCount,
  selectMeasuringToolsWorkingCount,
  selectSimpleMeasuringTools,
  loadIndicatorActualTimeByToolsId,
} = useElectricQualityAnalysis()

const pieData = computed(() => {
  const t = pieOriginData.value
  return [
    ['category', 'value'],
    ...Object.entries(t),
  ]
})
const linesData = computed(() => {
  const t = linesOriginData.value
  const x = t.xaxis?.data ?? []
  const s = t.series ?? []
  return [
    ['时间', ...x],
    ...s.map(({ name, data }) => [name, ...data]),
  ]
})
const selectedEquipment = ref()
const equipements = computed(() => {
  return Object.entries(equipmentData.value).map(([key, value]) => ({
    label: value as string,
    value: key,
  }))
})

let wrapperWidth = 0
async function resizeListeners(e: any) {
  if (wrapperWidth === e.clientWidth)
    return
  wrapperWidth = e.clientWidth
  showLineCharts.value = false
  await nextTick()
  showLineCharts.value = true
}

watchEffect(() => {
  if (selectedEquipment.value) {
    loadIndicatorActualTimeByToolsId(selectedEquipment.value)
  }
})

onBeforeUnmount(() => {
  erd.removeAllListeners()
})

onMounted(async () => {
  await selectMeasuringToolsCount()
  await selectMeasuringToolsWorkingCount()
  await selectSimpleMeasuringTools()
  selectedEquipment.value = equipements.value[0]?.value
  erd.listenTo(wrapper.value, debounce(resizeListeners, 300))
})
</script>

<template>
  <div class="electric-quality-analysis h-full w-full overflow-auto dark:p-3">
    <div ref="wrapper" class="min-h-full flex flex-col gap-3">
      <div class="flex flex-col gap-3 lg:flex-row">
        <div class="flex flex-auto flex-col gap-3">
          <div class="relative h-30 w-full overflow-auto">
            <div class="absolute left-0 top-0 h-full min-w-full flex items-center gap-3">
              <ElectricQualityAnalysisCard name="监测站点总数量" :value="cardData.zdCount" icon-wrapper-class="bg-gradient-from-emerald bg-gradient-to-cyan">
                <svg t="1732847504758" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9147" class="h-full w-full"><path d="M508.50474667 128.68721778L29.94631111 270.97315555h958.86449778zM29.94631111 270.97315555v520.35584h958.71886222V270.97315555H29.94631111z m257.77493334 281.07662223h-118.83861334V389.66613333H287.72124445v162.38364445z m257.62929777 0h-118.83861333V389.66613333h118.83861333v162.38364445z m302.92195556 138.93632H689.23847111V389.66613333h158.88839111v301.31996445z" p-id="9148" fill="#ffffff" /><path d="M989.53898667 792.05717333H29.21813333V270.24497778h960.17521778v521.81219555z m-958.86449778-1.45635555h957.26250666V271.70133333H30.67448889v518.89948445z m818.32618666-98.88654223H688.51029333V388.93795555h160.34474667v302.77632z m-159.03402666-1.45635555h157.43203556V390.39431111H689.96664889v299.86360889zM546.07872 552.77795555h-120.29496889V388.93795555h120.29496889V552.77795555z m-118.83861333-1.45635555h117.38225778V390.39431111h-117.38225778V551.3216z m-138.79068445 1.45635555h-120.29496889V388.93795555h120.29496889V552.77795555z m-118.83861333-1.45635555h117.38225778V390.39431111h-117.38225778V551.3216zM172.23224889 955.02336c-43.25376 0-78.6432-35.38944-78.6432-78.6432s35.38944-78.6432 78.6432-78.6432 78.6432 35.38944 78.6432 78.6432-35.38944 78.6432-78.6432 78.6432z" p-id="9149" fill="#ffffff" /><path d="M844.92288 955.02336c-43.25376 0-78.6432-35.38944-78.6432-78.6432s35.38944-78.6432 78.6432-78.6432 78.6432 35.38944 78.6432 78.6432-35.38944 78.6432-78.6432 78.6432z" p-id="9150" fill="#ffffff" /></svg>
              </ElectricQualityAnalysisCard>
              <ElectricQualityAnalysisCard name="监测设备总数量" :value="cardData.toolsCount" icon-wrapper-class="bg-gradient-from-amber bg-gradient-to-orange">
                <svg t="1732847772045" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11696" class="h-full w-full"><path d="M188.928 378.88q0-128.64 95.232-219.264Q378.688 69.632 512 69.632t227.84 89.984q95.232 90.688 95.232 219.264 0 3.456-0.64 6.848-0.704 3.456-2.048 6.656-1.28 3.2-3.2 6.08-1.92 2.88-4.416 5.312-2.432 2.432-5.312 4.352-2.88 1.92-6.144 3.264-3.2 1.344-6.592 2.048-3.392 0.64-6.848 0.64t-6.848-0.64q-3.392-0.704-6.592-2.048-3.2-1.28-6.144-3.2-2.88-1.92-5.312-4.416-2.432-2.432-4.352-5.312-1.92-2.88-3.264-6.08-1.28-3.2-1.984-6.656-0.64-3.392-0.64-6.848 0-98.432-73.472-168.32Q617.152 140.096 512 140.096q-105.152 0-179.264 70.592-73.408 69.824-73.408 168.32 0 3.392-0.64 6.784-0.704 3.456-2.048 6.656-1.28 3.2-3.2 6.08-1.92 2.88-4.48 5.312-2.368 2.432-5.248 4.352-2.944 1.92-6.144 3.264-3.2 1.344-6.592 2.048-3.392 0.64-6.848 0.64t-6.848-0.64q-3.392-0.704-6.656-2.048-3.2-1.28-6.08-3.2-2.88-1.92-5.312-4.416-2.432-2.432-4.352-5.312-1.92-2.88-3.264-6.08-1.28-3.2-1.984-6.656-0.704-3.392-0.704-6.848z m196.928-122.496q-53.12 50.56-53.12 122.496 0 3.456 0.64 6.848 0.64 3.456 2.048 6.656 1.28 3.2 3.2 6.08 1.92 2.88 4.416 5.312 2.432 2.432 5.312 4.352 2.88 1.92 6.08 3.264 3.2 1.344 6.592 2.048 3.392 0.64 6.912 0.64 3.456 0 6.848-0.64 3.392-0.704 6.592-2.048 3.2-1.28 6.08-3.2 2.88-1.92 5.376-4.416 2.432-2.432 4.352-5.312 1.92-2.88 3.2-6.08 1.408-3.2 2.048-6.656 0.64-3.392 0.64-6.848 0-41.728 31.36-71.488 32-30.464 77.568-30.464 45.632 0 77.632 30.464 31.232 29.76 31.232 71.488 0 3.456 0.64 6.848 0.704 3.456 2.048 6.656 1.344 3.2 3.264 6.08 1.92 2.88 4.352 5.312 2.496 2.432 5.376 4.352 2.88 1.92 6.08 3.264 3.2 1.344 6.592 2.048 3.392 0.64 6.848 0.64 3.52 0 6.912-0.64 3.392-0.704 6.592-2.048 3.2-1.28 6.08-3.2 2.88-1.92 5.312-4.416 2.496-2.432 4.416-5.312 1.92-2.88 3.2-6.08 1.344-3.2 2.048-6.656 0.64-3.392 0.64-6.848 0-71.872-53.12-122.496-52.416-49.92-126.144-49.92-73.728 0-126.144 49.92z m94.016 251.968V431.872q0-3.2 0.64-6.272 0.576-3.072 1.792-6.016 1.216-2.88 2.944-5.504 1.728-2.624 3.968-4.864 2.24-2.24 4.864-3.968 2.56-1.728 5.504-2.944 2.944-1.28 6.016-1.856 3.072-0.64 6.272-0.64 3.136 0 6.208 0.64 3.136 0.64 6.016 1.856 2.944 1.216 5.504 2.944 2.624 1.728 4.864 3.968 2.24 2.24 3.968 4.864 1.792 2.56 3.008 5.504 1.152 2.944 1.792 6.016 0.64 3.072 0.64 6.272v76.48H896a64 64 0 0 1 64 64v318.016a64 64 0 0 1-64 64H128a64 64 0 0 1-64-64V572.352a64 64 0 0 1 64-64h351.872z m-324.224 191.36a44.8 44.8 0 1 0 63.36 63.36 44.8 44.8 0 0 0-63.36-63.36z m135.808 0a44.8 44.8 0 1 0 63.296 63.36 44.8 44.8 0 0 0-63.36-63.36z" p-id="11697" fill="#ffffff" /></svg>
              </ElectricQualityAnalysisCard>
              <ElectricQualityAnalysisCard name="设备测点总数量" :value="cardData.indicatorCount" icon-wrapper-class="bg-gradient-from-fuchsia bg-gradient-to-violet">
                <svg t="1732847838311" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13830" class="h-full w-full"><path d="M512 978.2784a39.6288 39.6288 0 0 1-21.8112-6.5024 43.8272 43.8272 0 0 1-9.5744-7.7312l-254.208-277.8624a129.8432 129.8432 0 0 1-3.6864-3.9424l-1.1776-1.3312a6.4512 6.4512 0 0 1-0.8192-0.9216l-1.024-1.0752a24.1664 24.1664 0 0 1-2.6112-3.584 384 384 0 0 1 445.44-598.6816l1.5872 0.768a7.8336 7.8336 0 0 1 1.28 0.5632l1.1776 0.512a6.8608 6.8608 0 0 1 2.0992 1.0752 382.5152 382.5152 0 0 1 227.2256 349.5936v0.512a383.5904 383.5904 0 0 1-90.0096 246.784 13.056 13.056 0 0 1-1.9968 2.304 204.2368 204.2368 0 0 1-14.6944 16.1792l-247.808 270.9504a39.8848 39.8848 0 0 1-29.3888 12.3904z m0-700.3648a156.5696 156.5696 0 1 0 154.7776 156.5696A155.9552 155.9552 0 0 0 512 277.9136z" p-id="13831" fill="#ffffff" /></svg>
              </ElectricQualityAnalysisCard>
            </div>
          </div>
          <div v-loading="linesLoading" class="alpha-block h-340px flex flex-col bg-white">
            <div class="flex items-center p-3">
              <span class="pl-2 line-height-none" style="border-left: 4px solid var(--el-color-primary);">设备点位趋势图</span>
              <ElSelect v-model="selectedEquipment" filterable class="ml-auto" style="--el-select-width: 130px;">
                <ElOption v-for="item in equipements" :key="item.value" v-bind="item" />
              </ElSelect>
            </div>
            <div class="flex-auto px-3">
              <ElectricQualityAnalysisLineCharts v-if="showLineCharts" name="设备点位趋势图" :data="linesData" />
            </div>
          </div>
        </div>
        <div class="alpha-block h-340px w-full flex flex-shrink-0 flex-col bg-white lg:h-auto lg:w-500px">
          <div class="flex items-center p-3">
            <span class="pl-2 line-height-none" style="border-left: 4px solid var(--el-color-primary);">设备运行状态</span>
          </div>
          <div class="flex-auto p-3">
            <ElectricQualityAnalysisPie name="运行状态" :data="pieData" />
          </div>
        </div>
      </div>
      <div class="alpha-block flex flex-auto flex-col bg-white">
        <div class="flex items-center p-3">
          <span class="pl-2 line-height-none" style="border-left: 4px solid var(--el-color-primary);">点位实时值</span>
        </div>
        <div class="flex flex-auto flex-col p-3">
          <ElectricQualityAnalysisTable />
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.electric-quality-analysis {
  background: var(--el-bg-color-page);
}
</style>
